<template>
    <div class="block text-center" m="t-4">
        <el-carousel trigger="click" height="478px" arrow="always">
            <el-carousel-item v-for="item in imgs" :key="item">
                <img :src="item.imgurl" alt="" style="width: 100%;">
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="title">
        <h2>知进四大学院</h2>
        <h3>知进学校各学院定位及简介</h3>
        <div class="line"></div>
        <p>实现每一个孩子的职业梦想</p>
    </div>
    <div class="body" v-for="i in info">
        <div class="container">
            <!-- 左侧图片 -->
            <img src="http://www.zjjy.cc/img/zyjsimg1.9f29e0cc.png" alt="计算机学院 banner">
            <!-- 右侧文本内容 -->
            <div class="content-box">
                <h2>{{ i.name }}</h2>
                <div class="divider"></div>
                <p><span>学院定位:</span>{{ i.profession_location }}</p>
                <p><span>学院简介:</span>{{ i.profession_profile }}</p>
                <p class="course-list">
                    <span>主要课程:</span>{{ i.profession_course }}
                </p>
            </div>
        </div>
    </div>
    <div class="special">
        <h2>教育特色</h2>
        <h3>培养具有1~2年工作经验的高级应用型专业技术人才</h3>
        <div class="line"></div>
        <p>教学管理体系、教育管理体系、就业服务体系保障人人皆可成才</p>
        <div class="container">
            <div>
                <p>激励教学，成就驱动</p>
                <li>注重实战能力</li>
                <li>学员潜力激发</li>
                <li>感悟式素质教育</li>
                <span class="carton"></span>
            </div>
            <div>
                <p>感悟式素质教育</p>
                <li>感悟式教育:职场文化、传统文化爱国教育、军队文化、校园文化</li>
            </div>
            <div>
                <p>就业选择</p>
                <li>先平台后薪资、注重平台，快速提升个人能力，提高行业地位</li>
            </div>
            <div>
                <p>创新职业教育引领者</p>
                <li>知进教育以“高品质就业”为使命
                    保障后续就业</li>
            </div>
        </div>
    </div>
    <div class="title">
        <h2>就业服务</h2>
        <h3>打造职业教育高品质就业品牌</h3>
        <div class="line"></div>
        <p>提供学员就业后技术支持、学员就业后工作指导、职场发展以及职位提升。</p>
        <img src="http://www.zjjy.cc/img/jyfwimg.71bd0b60.png" alt="">
    </div>
    <div class="title">
        <h2>就业选择：先平台，后薪资</h2>
        <h3>多家企业offer到手，就业优先选择好平台、大平台，主动权在我们手里</h3>
        <div class="line"></div>
        <p>完善的终身就业服务，终身指导就业。让每个学生就业后都能得到保障，稳定发展，行业地位提升</p>
    </div>
    <div class="foot">
        <el-carousel height="400px" direction="vertical" type="card" :autoplay="true" interval="500" motion-blur="true">
            <el-carousel-item v-for="item in companys" :key="item">
                <p style="text-align: center;">喜报</p>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import http from '@/http';
const info = reactive([])
const imgs= reactive([])
onMounted(() => {
    http({
        method: 'get',
        url: 'profession/'
    }).then(resp => {
        console.log(resp);
        info.splice(0, info.length, ...resp.data.profession_info)
        imgs.splice(0, imgs.length, ...resp.data.profession_img)
        console.log(imgs);
        
    }).catch(error => {
        console.log(error);
    })
})


</script>

<style scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.special {
    padding: 25px;
    background: url(http://www.zjjy.cc/img/jymsbg.05e5c908.png) 50% no-repeat;
    text-align: center;
    color: white;

    h2 {
        font-size: 60px;
    }

    h3 {
        font-size: 30px;
        font-weight: 500;
    }

    .line {
        width: 20%;
        margin: auto;
        border-bottom: 3px solid black;
    }

    p {
        font-size: 18px;
    }

    .container {
        display: flex;
        justify-content: center;
        gap: 10px;
        color: black;

        div {
            text-align: start;
            width: 260px;
            height: 180px;
            background-color: white;
            padding: 5px 20px;

            p {
                font-weight: 600;
            }

            li {
                list-style: none;
            }
        }
    }
}

.title {
    text-align: center;

    h2 {
        font-size: 60px;
    }

    h3 {
        font-size: 30px;
        font-weight: 500;
    }

    .line {
        width: 20%;
        margin: auto;
        border-bottom: 3px solid black;
    }

    p {
        font-size: 18px;
    }
}

.body {
    .container {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        /* 图片与文本的间距 */
        max-width: 1200px;
        /* 限制最大宽度，让内容更规整 */
        margin: 0 auto;
        /* 水平居中 */
        padding: 20px;
        font-family: "Microsoft YaHei", sans-serif;
        /* 适配中文字体 */
        color: #333;
        /* 文本基础颜色 */
    }

    /* 左侧图片容器 */
    .container img {
        width: 400px;
        /* 固定图片宽度，可按需调整 */
        height: auto;
        /* 高度自动适配，保持比例 */
        border-radius: 8px;
        /* 轻微圆角，让图片更柔和 */
        object-fit: cover;
        /* 保持图片裁剪/缩放填充容器 */
    }

    /* 右侧文本内容容器 */
    .content-box {
        flex: 1;
        /* 占满剩余空间 */
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        /*  subtle 阴影增加层次感 */
        border-radius: 8px;
        padding: 20px;
    }

    /* 标题样式 */
    .content-box h2 {
        font-size: 28px;
        color: #d9534f;
        /* 标题红配色，呼应设计 */
        margin: 0 0 10px;
        border-left: 5px solid #d9534f;
        /* 左侧红色装饰线 */
        padding-left: 10px;
        /* 与装饰线保持间距 */
    }

    /* 下划线分隔 */
    .content-box .divider {
        width: 80px;
        height: 2px;
        background-color: #d9534f;
        margin: 0 0 20px;
    }

    /* 段落文本通用样式 */
    .content-box p {
        line-height: 1.8;
        margin: 0 0 15px;
        
        /* 首行缩进，适配中文排版 */
        span{
            font-weight: 600;
            margin-right: 10px;
        }
    }

    /* 课程列表特殊处理（如果课程是列表形式，可加） */
    .content-box p.course-list {
        text-indent: 0;
        /* 取消课程列表的首行缩进 */
        line-height: 1.8;
    }
}
</style>